<template>
    <div class="container">

      <div class="tips-title">1.基础用法 + 禁用状态</div>
      <el-checkbox v-model="checkbox_1" label="1">备选项1</el-checkbox>
      <el-checkbox v-model="checkbox_2" label="2" disabled>备选项2</el-checkbox>
      <el-checkbox v-model="checkbox_3" label="1" disabled>备选项3</el-checkbox>

      <div class="tips-title">2.多选框组</div>
      <el-checkbox-group v-model="checkbox_4">
        <el-checkbox label="1">复选框 A</el-checkbox>
        <el-checkbox label="2">复选框 B</el-checkbox>
        <el-checkbox label="3">复选框 C</el-checkbox>
        <el-checkbox label="4" disabled>复选框 禁用</el-checkbox>
        <el-checkbox label="5" disabled>复选框 选中且禁用</el-checkbox>
      </el-checkbox-group>

      <div class="tips-title">3.indeterminate 状态<span class="tips-explain"> - / 全选 / 全不选</span></div>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkbox_5" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
      </el-checkbox-group>

      <div class="tips-title">4.可选项目数量的限制<span class="tips-explain"> 至少选1个，最多可选3个</span></div>
      <el-checkbox-group v-model="checkbox_6" :min="1" :max="3">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
      </el-checkbox-group>
      <div class="tips-title">5.按钮样式<span class="tips-explain"> 可设置4种大小: medium / small / mini</span></div>
      <div>
        <el-checkbox-group v-model="checkbox_7">
          <el-checkbox-button v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkbox_8" size="medium">
          <el-checkbox-button v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkbox_9" size="small">
          <el-checkbox-button v-for="city in cities" :label="city.id" :disabled="city.id === 'beijing'" :key="city.id">{{city.name}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkbox_10" size="mini" disabled>
          <el-checkbox-button v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox-button>
        </el-checkbox-group>
      </div>

      <div class="tips-title">6.带有边框<span class="tips-explain"> border </span></div>
      <el-checkbox-group v-model="checkbox_11">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id" border>{{city.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
</template>
<script>
  const cityItems = [
    {id:'beijing',name: '北京'},
    {id:'shanghai',name: '上海'},
    {id:'guangzhou',name: '广州'},
    {id:'shenzhen',name: '深圳'}
  ];

  export default {
    name: 'f-checkbox',
    data() {
      return {
        checkbox_1: true,
        checkbox_2: false,
        checkbox_3: true,
        checkbox_4: ['1','2','5'],
        cities: cityItems,

        isIndeterminate: true,
        checkAll: false,
        checkbox_5: ['beijing','guangzhou'],

        checkbox_6: ['shanghai','guangzhou'],
        checkbox_7: [],
        checkbox_8: ['shanghai','guangzhou'],
        checkbox_9: ['beijing','guangzhou'],
        checkbox_10: ['beijing','shanghai','guangzhou'],
        checkbox_11: ['beijing','guangzhou']
      }
    },
    methods:{
      handleCheckAllChange: function(val){
        const allList = cityItems.map((item, index, array) => {
          return item.id;
        });
        this.checkbox_5 = val ? allList : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange: function (val) {
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  }
</script>
<style>

</style>

